<script lang="ts" setup>
import { onMounted, onUnmounted, reactive } from 'vue'
import { dbus } from '@/dbus/dbus.ts'
import { invoke_proxy } from '@/functions/invoke.ts'
import { BackendResponse } from '@/runtime/response.ts'
import { BACKEND_CODE_OK } from '@/runtime/code.ts'
import { ComponentV2raySubscription, new_component_v2ray_subscription } from '@/models/components/v2ray/v2ray_subscription.ts'

const emit = defineEmits(['saved'])
const state = reactive<{ show: boolean; subscription: ComponentV2raySubscription; saving: boolean }>({ show: false, subscription: new_component_v2ray_subscription(), saving: false })

onMounted(async () => {
    dbus.on('component:v2ray:edit-subscription-config', show)
})

onUnmounted(async () => {
    dbus.off('component:v2ray:edit-subscription-config', show)
})

async function show(data: unknown): Promise<void> {
    if (data) {
        state.subscription = data as ComponentV2raySubscription
    }

    state.show = true
}

async function save(): Promise<void> {
    console.log(state.subscription)

    state.saving = true
    const response = await invoke_proxy<BackendResponse<any>>('invoke_component_v2ray_save_subscription', { subscription: state.subscription })
    state.saving = false
    if (BACKEND_CODE_OK !== response.code) {
        window.Message.error(response.message)

        return
    }

    window.Message.success('保存成功')
    state.show = false
    emit('saved')
}
</script>

<template>
    <n-modal v-model:show="state.show" :mask-closable="false" class="modal" transform-origin="center">
        <n-card closable @close="state.show = false">
            <n-space :wrap="false" :wrap-item="false" vertical>
                <n-space :wrap="false" :wrap-item="false" align="center">
                    <div class="max-flex-width">
                        <n-input-group>
                            <n-input-group-label size="small">订阅名称</n-input-group-label>
                            <n-input v-model:value="state.subscription.name" placeholder="订阅名称，用于标识一个订阅配置" size="small" spellcheck="false"></n-input>
                        </n-input-group>
                    </div>
                    <n-space :wrap="false" :wrap-item="false" align="center">
                        <div>是否启用</div>
                        <n-switch v-model:value="state.subscription.enabled" size="small"></n-switch>
                    </n-space>
                    <n-space :wrap="false" :wrap-item="false" align="center">
                        <div>是否自动更新</div>
                        <n-switch v-model:value="state.subscription.auto_update" size="small"></n-switch>
                    </n-space>
                </n-space>
                <n-space :wrap="false" :wrap-item="false" align="center">
                    <div class="max-flex-width">
                        <n-input-group>
                            <n-input-group-label size="small">订阅地址</n-input-group-label>
                            <n-input v-model:value="state.subscription.url" placeholder="链接地址" size="small" spellcheck="false"></n-input>
                        </n-input-group>
                    </div>
                </n-space>
            </n-space>
            <n-space :wrap="false" :wrap-item="false" align="center" class="buttons" justify="center">
                <n-button size="small" type="error" @click="state.show = false">取消</n-button>
                <n-button :disabled="state.saving" size="small" type="info" @click="save()">保存</n-button>
            </n-space>
        </n-card>
    </n-modal>
</template>

<style lang="scss" scoped>
.modal {
    width: 80vw;
    height: 80vh;
}

.buttons {
    margin-top: 60px;
}
</style>
